<template>
  <div id="app">
    <h1 style="text-align: center;">这是图片加载组件的测试容器</h1>
    <div class="box">
      <ImageLoader placeholder="http://localhost:4000/static/image/fix-bar.jpg"
        src="http://localhost:4000/static/image/bar.jpg" :duration="1200" @load="loadedHandler"></ImageLoader>
    </div>
  </div>
</template>

<script>
import ImageLoader from './index.vue'
export default {
  name: 'App',
  components: {
    ImageLoader
  },
  data() {
    return {
    }
  },
  methods: {
    loadedHandler() {
      console.log('loaded')
    }
  },
  computed: {
  }
}
</script>

<style scoped lang="less">
.box {
  width: 800px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid #333;
}
</style>
